<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>输入过滤</title>
</head>
<body>
    <label for="username">
        用户名
    </label>
    <input type="text"  size="30" maxlength="200">
    <div cols="30" rows="20" id="username">
        全会选举了中央政治局委员、中央政治局常务委员会委员、中央委员会总书记；根据中央政治局常务委员会的提名，通过了中央书记处成员，决定了中央军事委员会组成人员；批准了二十届中央纪律检查委员会第一次全体会议选举产生的书记、副书记和常务委员会委员人选。名单如下：
    </div>
</body>
<script>
/**
 * @description: 剪切事件周期函数
 * @return {*}
 */
const inputDOM = document.getElementById('username');
//复制操作发生前触发。
inputDOM.addEventListener('beforecopy',(e)=>{
    console.info('beforecopy--',e);
})
//复制操作发生时触发。
inputDOM.addEventListener('copy',(e)=>{
    console.info('copy--',e);
    console.info('getClipboardText--',getClipboardText(e));
    // setClipboardText(e,'hello world'); //设置剪贴板内容。
})
//剪切操作发生前触发。(该事件只能发生在文本框内)
inputDOM.addEventListener('beforecut',(e)=>{
    console.info('beforecut--',e);
})
//剪切操作发生时触发。(该事件只能发生在文本框内)
inputDOM.addEventListener('cut',(e)=>{
    console.info('cut--',e);
    console.info('getClipboardText--',getClipboardText(e))
})
//粘贴操作发生前触发。
inputDOM.addEventListener('beforepaste',(e)=>{
    console.info('beforepaste--',e);
})
//粘贴操作发生时触发。
inputDOM.addEventListener('paste',(e)=>{
    console.info('paste--',e);
    console.info('getClipboardText--',getClipboardText(e))
})
/**
 * @description: 获取剪贴板中指定格式的数据
 * @param {*} event
 * @return {*}
 */
function getClipboardText(event){ 
 const clipboardData = (event.clipboardData || window.clipboardData); 
 return clipboardData.getData("text"); 
} 
/**
 * @description: 设置剪贴板中指定格式的数据
 * @param {*} event
 * @param {*} value
 * @return {*}
 */
function setClipboardText (event, value){ 
 if (event.clipboardData){ 
 return event.clipboardData.setData("text/plain", value); 
 } else if (window.clipboardData){ 
 return window.clipboardData.setData("text", value); 
 } 
}
</script>
</html>